<template>
    <section id='foot_guide'>
    	<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position:absolute;width:0;height:0">
	    	<defs>
	    		<symbol id="nav-home" viewBox="0 0 1024 1024">
                    <path d="M951.467 425.956l-386.133-307.2c-29.867-23.467-76.8-23.467-106.667 0l-386.133 307.2c-8.533 6.4-10.667 21.333-4.267 29.867 6.4 8.533 21.333 10.667 29.867 4.267l386.133-309.333c14.933-10.667 40.533-10.667 53.333 0l386.133 307.2c6.4 4.267 10.667 4.267 14.933 4.267 6.4 0 12.8-2.133 17.067-8.533 6.4-8.533 6.4-21.333-4.267-27.733zM874.667 504.889c-12.8 0-21.333 8.533-21.333 21.333v311.467c0 19.2-8.533 29.867-27.733 29.867h-204.8v-132.267c0-57.6-46.933-102.4-104.533-102.4h-4.267c-57.6 0-104.533 46.933-104.533 102.4v132.267h-204.8c-19.2 0-32-10.667-32-29.867v-311.467c0-12.8-8.533-21.333-21.333-21.333s-21.333 8.533-21.333 21.333v311.467c0 42.667 32 72.533 74.667 72.533h226.133c12.8 0 21.333-8.533 21.333-21.333v-153.6c0-32 27.733-59.733 61.867-59.733h4.267c34.133 0 61.867 27.733 61.867 59.733v153.6c0 12.8 8.533 21.333 21.333 21.333h226.133c42.667 0 70.4-29.867 70.4-72.533v-311.467c0-10.667-8.533-21.333-21.333-21.333z" p-id="1404" fill="#666666"></path>
                </symbol>
                <symbol id="nav-home-active" viewBox="0 0 1024 1024">
                    <path d="M951.466667 430.933333L565.333333 125.866667c-29.866667-23.466667-76.8-23.466667-106.666666 0L72.533333 430.933333c-6.4 6.4-10.666667 14.933333-6.4 23.466667s10.666667 14.933333 19.2 14.933333h44.8v375.466667c0 42.666667 32 72.533333 74.666667 72.533333h224c12.8 0 21.333333-8.533333 21.333333-21.333333v-153.6c0-32 27.733333-59.733333 61.866667-59.733333h4.266667c34.133333 0 61.866667 27.733333 61.866666 59.733333V896c0 12.8 8.533333 21.333333 21.333334 21.333333h226.133333c42.666667 0 70.4-29.866667 70.4-72.533333V469.333333h42.666667c8.533333 0 17.066667-6.4 19.2-14.933333s2.133333-17.066667-6.4-23.466667z" p-id="1561" fill="#f86254"></path>
                </symbol>

                <symbol id="nav-found" viewBox="0 0 1024 1024">
                    <path d="M864 832 160 832c-22.4 0-44.8-12.8-54.4-32-12.8-19.2-9.6-44.8 3.2-64l172.8-268.8 179.2-275.2C470.4 172.8 492.8 160 512 160c0 0 0 0 0 0 22.4 0 41.6 9.6 54.4 28.8l352 544c12.8 19.2 12.8 44.8 3.2 64C908.8 819.2 889.6 832 864 832zM512 224 160 768l704 0L512 224z" p-id="2427" fill="#666666"></path>
                </symbol>

                <symbol id="nav-found-active" viewBox="0 0 1024 1024">
                    <path d="M918.4 736l-352-544c-12.8-19.2-32-28.8-54.4-28.8 0 0 0 0 0 0-22.4 0-41.6 9.6-54.4 28.8l-179.2 275.2L108.8 736c-12.8 19.2-12.8 44.8-3.2 64 9.6 19.2 32 32 54.4 32l704 0c22.4 0 44.8-12.8 54.4-32C931.2 780.8 931.2 755.2 918.4 736z" p-id="1794" fill="#f86254"></path>
                </symbol>

                <symbol id="nav-mine" viewBox="0 0 1024 1024">
                    <path d="M800 352C800 194.133333 672 64 512 64S224 194.133333 224 352c0 117.333333 70.4 219.733333 172.8 264.533333-130.133333 42.666667-236.8 153.6-270.933333 296.533334-2.133333 10.666667 4.266667 23.466667 14.933333 25.6h4.266667c10.666667 0 19.2-6.4 21.333333-17.066667C204.8 759.466667 349.866667 640 509.866667 640h2.133333c160 0 288-130.133333 288-288z m-533.333333 0C266.666667 217.6 377.6 106.666667 512 106.666667s245.333333 110.933333 245.333333 245.333333S646.4 597.333333 512 597.333333s-245.333333-110.933333-245.333333-245.333333zM893.866667 913.066667c-23.466667-96-78.933333-179.2-157.866667-234.666667l-21.333333-14.933333c-10.666667-6.4-23.466667-4.266667-29.866667 6.4-6.4 10.666667-4.266667 23.466667 6.4 29.866666l21.333333 14.933334c70.4 49.066667 121.6 123.733333 140.8 211.2 2.133333 10.666667 10.666667 17.066667 21.333334 17.066666h4.266666c10.666667-6.4 17.066667-17.066667 14.933334-29.866666z" p-id="2032" fill="#666666"></path>
                </symbol>

                <symbol id="nav-mine-active" viewBox="0 0 1024 1024">
                    <path d="M616.533333 618.666667c106.666667-42.666667 181.333333-147.2 181.333334-266.666667C797.866667 192 669.866667 64 509.866667 64c-157.866667 0-288 128-288 288 0 121.6 74.666667 224 181.333333 266.666667-134.4 38.4-241.066667 151.466667-268.8 294.4-2.133333 6.4 0 12.8 4.266667 17.066666 2.133333 4.266667 8.533333 8.533333 14.933333 8.533334h712.533333c6.4 0 12.8-2.133333 17.066667-8.533334 4.266667-4.266667 6.4-10.666667 4.266667-17.066666-29.866667-142.933333-136.533333-256-270.933334-294.4z" p-id="2151" fill="#f86254"></path>
                </symbol>
	    	</defs>
    	</svg>
        <section @click = "gotoAddress({path: '/home/11'})" class="guide_item">
        	<svg class="icon_style" >
                <use xmlns:xlink="http://www.w3.org/1999/xlink" :xlink:href="$route.path.indexOf('home') !== -1? '#nav-home-active' : '#nav-home'"></use>
            </svg>
            <span :class="$route.path.indexOf('home') !== -1? 'active' : ''">频道</span>
        </section>
        <section @click = "gotoAddress({path: '/found/ip'})" class="guide_item">
        	<svg class="icon_style">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" :xlink:href="$route.path.indexOf('found') !== -1? '#nav-found-active' : '#nav-found'"></use>
            </svg>
            <span :class="$route.path.indexOf('found') !== -1? 'active' : ''">发现</span>
        </section>
        <section @click = "gotoAddress('/mine')" class="guide_item">
        	<svg class="icon_style">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" :xlink:href="$route.path.indexOf('mine') !== -1? '#nav-mine-active' : '#nav-mine'"></use>
            </svg>
            <span :class="$route.path.indexOf('mine') !== -1? 'active' : ''">我的</span>
        </section>
    </section>
</template>

<script>
    import {mapState} from 'vuex'
    export default {
    	data(){
            return{
                
            }
        },
        created(){
           
        },
        mounted(){
            
        },
        computed: {
            ...mapState([
                'geohash'
            ]),
        },
        methods: {
        	gotoAddress(path){
        		this.$router.push(path)
        	}
        },

    }

</script>

<style lang="scss" scoped>
    @import '../../style/mixin';

    #foot_guide{
        background-color: #fff;
        position: fixed;
        z-index: 100;
        left: 0;
        right: 0;
        bottom: 0;
        @include wh(100%, 1.95rem);
        display: flex;
        box-shadow: 0 -0.026667rem 0.053333rem rgba(0,0,0,.1);
    }
    .guide_item{
    	flex: 1;
    	display: flex;
    	text-align: center;
    	flex-direction: column;
    	align-items: center;
		.icon_style{
			@include wh(1rem, 1rem);
			margin-top: .3rem;
			fill: #ccc;
		}
		span{
			@include sc(.45rem, #666);
             &.active {
                 color: #f86254;
             }
		}
        
    }
   
</style>
